import React from "react";
import store from "../../store/wwj/index";
import { GET_SONG, GET_SONGURL } from "../../api/wzy/actionCreator";
import { SET_PRODUCTS } from "../../store/hm/actionCreater";
import app from "../../assets/wzy/css/songPlayer.module.css";
const songObj = JSON.stringify({ id: "" });
localStorage.setItem("songid", songObj);
localStorage.setItem("songdata", songObj);
class SongPlayer extends React.Component {
    constructor() {
        super();
        this.state = {
            playDisplay: true,
            pauseDisplay: false,
            // 总时间
            totalTime: "00:00",
            // 当前播放时间
            currentTime: "00:00",
            // 进度条是否可拖动
            // processItemMove: false,
            // // 进度条item是否可拖动
            // volumeProcessItemMove: false
            comDisplay: false,
            simplePlayerDisplay: true,
            listDisplay: false,
            songId: JSON.parse(localStorage.getItem("songid")).id,
            songIndex: JSON.parse(localStorage.getItem("songid")).i,
            historyList: [],
            listId: JSON.parse(localStorage.getItem("songdata")).id,
            nextPlay: true,
            nextDisplay: true,
            randomDisplay: false,
            singleDisplay: false
        };
    }
    // componentWillMount() {
    //     this.simplePlayer.style.height = 0;
    // }
    componentDidMount() {
        // this.simplePlayer.style.height = 0;
        //监听localStorage中的数据变化
        let that = this;
        setInterval(() => {
            if (
                that.state.songId !==
                JSON.parse(localStorage.getItem("songid")).id
            ) {
                that.setState({
                    songId: JSON.parse(localStorage.getItem("songid")).id,
                    songIndex: JSON.parse(localStorage.getItem("songid")).i
                });
                store.dispatch(GET_SONG(that.state.songId));
                store.dispatch(GET_SONGURL(that.state.songId));
                this.simplePlayer.style.height = "60px";
            }
        }, 500);

        //接受歌单ID
        setInterval(() => {
            if (
                that.state.listId !==
                JSON.parse(localStorage.getItem("songdata")).id
            ) {
                that.setState({
                    listId: JSON.parse(localStorage.getItem("songdata")).id
                });
                store.dispatch(SET_PRODUCTS(that.state.listId));
            }
        }, 2000);

        let _this = this;
        let audio = this.audio;
        // 设置audio的canplay事件监听
        audio.addEventListener("canplay", () => {
            //获取总时间
            let duration = parseInt(audio.duration / 60);
            let duration1 = duration < 10 ? `0${duration}` : duration;
            let durationY = parseInt(audio.duration % 60);
            let durationY1 = durationY < 10 ? `0${durationY}` : durationY;
            this.setState({
                totalTime: `${duration1}:${durationY1}`
            });
        });
        //添加时间变化监听
        audio.addEventListener("timeupdate", () => {
            let currentTime = parseInt(audio.currentTime / 60);
            let currentTime1 =
                currentTime < 10 ? `0${currentTime}` : currentTime;
            let currentTimeY = parseInt(audio.currentTime % 60);
            let currentTimeY1 =
                currentTimeY < 10 ? `0${currentTimeY}` : currentTimeY;
            //进度条长度
            let playWidth =
                _this.process.offsetWidth *
                (audio.currentTime / audio.duration);
            this.processPlayed.style.width = playWidth + "px";
            this.processItem.style.left = playWidth + "px";
            this.setState({
                currentTime: `${currentTime1}:${currentTimeY1}`
            });
            //当播放时间等于总时间时，切换下一首
            let changeTime = parseInt(audio.duration);
            let changeTime1 = parseInt(audio.currentTime);
            if (audio.currentTime == audio.duration && this.state.nextPlay) {
                // 顺序播放
                this.nextSong();
            } else if (changeTime1 == changeTime && this.state.randomDisplay) {
                //随机播放
                this.randomDom();
            }
        });
        //开始加载播放页面消失
        this.All.style.height = 0;
        this.blank.style.height = 0;
    }
    //暂停
    play() {
        let audio = this.audio;
        audio.pause();
        this.setState({
            playDisplay: false,
            pauseDisplay: true
        });
    }
    //播放
    pasue() {
        let audio = this.audio;
        audio.play();
        this.setState({
            playDisplay: true,
            pauseDisplay: false
        });
    }
    //点击进度条

    OnProcess(e) {
        this.processMove(e);
    }
    //进度条移动
    processMove(e) {
        let audio = this.audio;
        //进度条长度
        let setWidth =
            e.pageX - this.processPlayed.getBoundingClientRect().left;
        //计算点击偏移百分比
        let setWidthPercentage = setWidth / this.process.offsetWidth;
        //计算点击跳转实践
        const currentTime = this.audio.duration * setWidthPercentage;
        // 设置当前进度条偏移位置
        this.processPlayed.style.width = `${setWidth}px`;
        this.processItem.style.left = `${setWidth}px`;
        audio.currentTime = currentTime;
    }
    //拖动processItem
    onProcessItemMouseDown(e) {
        // //阻止事件冒泡
        // e.stopPropagation();
    }
    onProcessItemMouseUp(e) {
        // // 阻止事件冒泡
        // e.stopPropagation();
    }
    // onProcessItemMouseMove(e) {}
    // 展开
    spread(e) {
        this.setState({
            comDisplay: true,
            simplePlayerDisplay: false
        });
        this.All.style.height = "";
        this.All.style.position = "fixed";
        this.All.style.top = 0;
        this.All.style.zIndex = 2;
        this.blank.style.height = 0;
    }
    //收起
    fewer() {
        this.setState({
            comDisplay: false,
            simplePlayerDisplay: true
        });
        this.All.style.height = 0;
        this.blank.style.height = 0;
    }
    //歌曲列表
    listSpread() {
        this.setState({
            listDisplay: true,
            simplePlayerDisplay: false
        });
        this.blank.style.height = "";
    }
    //点击空白 歌曲列表消失
    removeList() {
        if (this.process.offsetWidth) {
            this.setState({
                listDisplay: false
            });
        } else {
            this.setState({
                listDisplay: false,
                simplePlayerDisplay: true
            });
        }
        this.blank.style.height = 0;
    }
    //点击列表播放
    listClick(id) {
        store.dispatch(GET_SONG(id));
        store.dispatch(GET_SONGURL(id));
    }

    //下一首
    nextSong() {
        if (this.state.nextPlay || this.state.singleDisplay) {
            //切歌单曲循环和顺序播放
            let listArr = store.getState().Productreducer.playlist.tracks;
            if (this.state.songIndex == listArr.length - 1) {
                this.state.songIndex = -1;
            }
            let nextId = listArr[this.state.songIndex + 1].id;
            store.dispatch(GET_SONG(nextId));
            store.dispatch(GET_SONGURL(nextId));
            this.state.songIndex = this.state.songIndex + 1;
        } else if (this.state.randomDisplay) {
            //切歌随机播放
            this.randomDom();
        }
    }
    //上一首
    beforeSong() {
        let listArr = store.getState().Productreducer.playlist.tracks;
        if (this.state.songIndex == 0) {
            this.state.songIndex = listArr.length;
        }
        let nextId = listArr[this.state.songIndex - 1].id;
        store.dispatch(GET_SONG(nextId));
        store.dispatch(GET_SONGURL(nextId));
        this.state.songIndex = this.state.songIndex - 1;
    }
    //单曲循环
    singleCycle() {
        this.audio.loop = "loop";
        this.setState({
            singleDisplay: true,
            nextDisplay: false,
            nextPlay: false
        });
    }
    // 顺序播放
    nextPlay() {
        this.setState({
            nextPlay: true,
            randomDisplay: false,
            nextDisplay: true
        });
        this.audio.loop = "{false}";
    }
    //随机播放
    randomPlay() {
        this.setState({
            randomDisplay: true,
            singleDisplay: false
        });
    }
    //封装随机播放
    randomDom() {
        let listArr = store.getState().Productreducer.playlist.tracks;
        let random = Math.random() * (listArr.length - 1);
        this.state.songIndex = this.state.songIndex + parseInt(random);
        if (this.state.songIndex > listArr.length - 1) {
            this.state.songIndex = this.state.songIndex - listArr.length + 1;
        }
        let nextId = listArr[this.state.songIndex].id;
        store.dispatch(GET_SONG(nextId));
        store.dispatch(GET_SONGURL(nextId));
    }
    render() {
        const msg = store.getState().songInfo.msg[0];
        const songUrl = store.getState().songUrl.url;
        let tracks = store.getState().Productreducer.playlist.tracks;
        return (
            <div>
                <div id={app.All} ref={ref => (this.All = ref)}>
                    <div
                        className={app.clickNone}
                        onClick={this.removeList.bind(this)}
                        ref={ref => (this.blank = ref)}
                    ></div>
                    <div
                        className={
                            this.state.comDisplay
                                ? `${app.container} ${app.active}`
                                : `${app.container} ${app.active1}`
                        }
                        // onMouseMove={this.onProcessItemMouseMove.bind(this)}
                        onMouseUp={this.onProcessItemMouseUp.bind(this)}
                    >
                        <div className={app.bgImg}>
                            <img src={msg.al.picUrl} alt="" />
                        </div>
                        <div className={app.bgLayer}></div>
                        <div className={app.top}>
                            <div className={app.toptop}>
                                <p>
                                    <img
                                        src={require("../../assets/wzy/iconfont/down.png")}
                                        onClick={this.fewer.bind(this)}
                                    />
                                </p>
                                <h3>{msg.name}</h3>
                            </div>
                            <h3 className={app.topbottom}>{msg.ar[0].name}</h3>
                        </div>
                        <div className={app.img}>
                            <div>
                                <img
                                    src={msg.al.picUrl}
                                    alt=""
                                    id={
                                        !this.state.pauseDisplay
                                            ? ""
                                            : app.rotate
                                    }
                                />
                            </div>
                        </div>
                        <div className={app.bottom}>
                            <div>
                                <audio
                                    autoPlay="autoplay"
                                    id={app.bgMusic}
                                    src={songUrl}
                                    ref={ref => (this.audio = ref)}
                                ></audio>
                                {/* 进度条 */}
                                <div className={app.processtime}>
                                    <div
                                        className={app.processwrapper}
                                        // onClick={this.onProcessClick}
                                    >
                                        <div className={app.time}>
                                            <span className={app.currenttime}>
                                                {this.state.currentTime}
                                            </span>
                                        </div>

                                        <div
                                            className={app.process}
                                            ref={ref => (this.process = ref)}
                                            onClick={this.OnProcess.bind(this)}
                                        >
                                            <div
                                                className={app.progressplayed}
                                                ref={ref =>
                                                    (this.processPlayed = ref)
                                                }
                                            >
                                                <div
                                                    className={app.processitem}
                                                    ref={ref =>
                                                        (this.processItem = ref)
                                                    }
                                                    onMouseDown={
                                                        this
                                                            .onProcessItemMouseDown
                                                    }
                                                    onMouseUp={
                                                        this
                                                            .onProcessItemMouseUp
                                                    }
                                                >
                                                    <div
                                                        className={
                                                            app.processiteminside
                                                        }
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div className={app.time}>
                                            <span className={app.totaltime}>
                                                {this.state.totalTime}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                {/* 播放设置 */}
                                <div className={app.player}>
                                    <img
                                        src={require("../../assets/wzy/iconfont/singleplay.png")}
                                        alt=""
                                        className={
                                            this.state.singleDisplay
                                                ? app.active
                                                : app.active1
                                        }
                                        onClick={this.randomPlay.bind(this)}
                                    />
                                    <img
                                        src={require("../../assets/wzy/iconfont/randomplay.png")}
                                        alt=""
                                        className={
                                            this.state.randomDisplay
                                                ? app.active
                                                : app.active1
                                        }
                                        onClick={this.nextPlay.bind(this)}
                                    />
                                    <img
                                        src={require("../../assets/wzy/iconfont/nextplay.png")}
                                        alt=""
                                        className={
                                            this.state.nextDisplay
                                                ? app.active
                                                : app.active1
                                        }
                                        onClick={this.singleCycle.bind(this)}
                                    />

                                    <img
                                        src={require("../../assets/wzy/iconfont/before.png")}
                                        alt=""
                                        onClick={this.beforeSong.bind(this)}
                                    />

                                    <img
                                        src={require("../../assets/wzy/iconfont/stop.png")}
                                        alt=""
                                        onClick={this.play.bind(this)}
                                        className={
                                            this.state.playDisplay
                                                ? app.active
                                                : app.active1
                                        }
                                    />
                                    <img
                                        src={require("../../assets/wzy/iconfont/play.png")}
                                        alt=""
                                        className={
                                            this.state.pauseDisplay
                                                ? app.active
                                                : app.active1
                                        }
                                        onClick={this.pasue.bind(this)}
                                    />

                                    <img
                                        src={require("../../assets/wzy/iconfont/next.png")}
                                        alt=""
                                        onClick={this.nextSong.bind(this)}
                                    />

                                    <img
                                        src={require("../../assets/wzy/iconfont/songlist.png")}
                                        alt=""
                                        onClick={this.listSpread.bind(this)}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 播放横条 */}
                <div
                    className={
                        this.state.simplePlayerDisplay
                            ? `${app.simplePlayer} ${app.active}`
                            : `${app.simplePlayer} ${app.active1}`
                    }
                    ref={ref => (this.simplePlayer = ref)}
                >
                    <div className={app.left} onClick={this.spread.bind(this)}>
                        <div className={app.left_img}>
                            <img
                                src={msg.al.picUrl}
                                alt=""
                                id={!this.state.pauseDisplay ? "" : app.rotate}
                            />
                        </div>
                        <div className={app.left_msg}>
                            <h3>{msg.name}</h3>
                            <p>{msg.ar[0].name}</p>
                        </div>
                    </div>
                    <div className={app.right}>
                        <img
                            src={require("../../assets/wzy/iconfont/simstop.png")}
                            alt=""
                            className={
                                this.state.playDisplay
                                    ? app.active
                                    : app.active1
                            }
                            onClick={this.play.bind(this)}
                        />
                        <img
                            src={require("../../assets/wzy/iconfont/simplay.png")}
                            alt=""
                            className={
                                this.state.pauseDisplay
                                    ? app.active
                                    : app.active1
                            }
                            onClick={this.pasue.bind(this)}
                        />
                        <img
                            src={require("../../assets/wzy/iconfont/list.png")}
                            alt=""
                            onClick={this.listSpread.bind(this)}
                        />
                    </div>
                </div>
                {/* 播放列表 */}
                <div
                    className={
                        this.state.listDisplay
                            ? `${app.playerList} ${app.active}`
                            : `${app.playerList} ${app.active1}`
                    }
                >
                    <div className={app.listtop}>播放列表</div>
                    <div className={app.listcontainer}>
                        <ul>
                            {tracks.map(function(item, index) {
                                return (
                                    <li
                                        key={index}
                                        // onClick={this.listClick.bind(
                                        //     this.item.id
                                        // )}
                                    >
                                        <p>
                                            {item.name}&nbsp; - &nbsp;
                                            {item.ar[0].name}
                                        </p>

                                        <img
                                            src={require("../../assets/wzy/iconfont/del.png")}
                                            alt=""
                                        />
                                    </li>
                                );
                            })}
                        </ul>
                    </div>
                </div>
            </div>
        );
    }
}
export default SongPlayer;
